<template>
  <div id="img-num-say" :class="{ h5: this.$store.state.webType === 'h5' }">
    <el-row :span="24" class="page">
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">{{
            $t('home')
          }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t('sections') }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t('culture') }}</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- banner -->

      <div class="banner-view">
        <el-carousel trigger="hover" indicator-position="outside" :height="bannerHeight + 'px'">
          <el-carousel-item v-for="(img, idx) in bannerData" :key="idx">
            <img :src="img.imgUrl" style="cursor: pointer" :alt="img.bannerName"
                 @click="$goDetail(img.id)"/>
            <div class="banner-text" @click.stop="$goDetail(img.id)"> {{ img.title }}</div>
          </el-carousel-item>
        </el-carousel>
        <!-- <div class="banner-text" @click.stop="readeImgInfo()">
          <div
            class="text-item"
            :class="{ current: currentBanner == tdx }"
            v-for="(text, tdx) in bannerData"
            :key="tdx"
            @click.stop="changeBanner(tdx)"
          >
            <span>{{text.labelName}}</span>
          </div>
        </div>
        <div class="banner-img">
          <template v-for="(img, idx) in bannerData">
            <div class="img-item" :key="idx" v-show="currentBanner == idx">
              <img :src="img.imgUrl" :alt="img.bannerName" />
            </div>
          </template>
        </div> -->
      </div>

      <!-- 中华之美文章 -->
      <div :span="24" class="page-content">
        <el-row :span="24" class="art-row">
          <div class="art-col">
            <!-- 文章label的tab -->
            <div class="art-tab">
              <div
                class="tab-item"
                @click="changeLabel('', '')"
                :class="{ active: currentLabel == '' }"
              >
                {{ $t('all') }}
              </div>
              <template v-if="labelData && labelData.length > 0">
                <div
                  class="tab-item"
                  @click="changeLabel(item.id, item.label)"
                  :class="{ active: currentLabel == item.label }"
                  v-for="(item, index) in labelData"
                  :key="index"
                >
                  {{ item.label }}
                </div>
              </template>
              <!-- 右侧切换视图和总条数 -->
              <div class="tab-info">
                <div class="info-total">
                  {{
                    $t('results').length > 6
                      ? listTotal + '  ' + $t('results')
                      : `共 ${listTotal} 条`
                  }}
                </div>
                <div class="toggle-img" @click="viewTypeChange('img')">
                  <img
                    v-if="currentView !== 'img'"
                    src="@/assets/images/use/art-view01.png"
                    title="图文列表"
                  />
                  <img
                    v-if="currentView === 'img'"
                    src="@/assets/images/use/art-view11.png"
                    title="图文列表"
                  />
                </div>
                <div class="toggle-text" @click="viewTypeChange('text')">
                  <img
                    v-if="currentView !== 'text'"
                    src="@/assets/images/use/art-view02.png"
                    title="文字列表"
                  />
                  <img
                    v-if="currentView === 'text'"
                    src="../assets/images/use/art-view22.png"
                    title="文字列表"
                  />
                </div>
              </div>
            </div>
            <infinite-scroll class="infinite" @loadBottom="loadMore">
              <div
                class="art-view"
                v-masonry
                :horizontal-order="true"
                transition-duration="0s"
                item-selector=".art-item"
                :fit-width="false"
                :gutter="gutterWidth"
                style="height: auto"
                :class="{ text: currentView === 'text' }"
              >
                <template v-if="currentView === 'img'">
                  <div
                    class="art-item scale-view"
                    v-masonry-tile
                    @click="$goDetail(img.id)"
                    v-for="(img, idx) in artData"
                    :key="idx"
                  >
                    <img :src="img.imgUrl" :alt="img.title"/>
                    <div class="art-content">
                      <div class="item-title two-line">
                        {{ img.title }}
                      </div>
                      <div class="item-info">
                        <!-- <div
                          class="info-label"
                          v-if="
                            img.label &&
                            img.label.length > 0 &&
                            $store.state.lang === 'CN'
                          "
                        >
                          {{currentLabel ? currentLabel : img.label[0]}}
                        </div> -->
                        <div class="info-time">{{ img.peridos }}</div>
                      </div>
                      <div class="item-content">{{ img.content }}</div>
                    </div>
                  </div>
                </template>
                <template v-else>
                  <div
                    class="art-item"
                    v-masonry-tile
                    @click="$goDetail(img.id)"
                    v-for="(img, idx) in artData"
                    :key="idx"
                  >
                    <div class="art-content">
                      <div class="item-title">
                        {{ img.title }}
                        <div class="item-info">
                          <!-- <div
                            class="info-label"
                            v-if="
                              img.label &&
                              img.label.length > 0 &&
                              $store.state.lang === 'CN'
                            "
                          >
                            {{currentLabel ? currentLabel : img.label[0]}}
                          </div> -->
                          <div class="info-time">{{ img.peridos }}</div>
                        </div>
                      </div>
                      <div class="item-content">{{ img.content }}</div>
                    </div>
                  </div>
                </template>
                <br/>
                <div
                  v-if="listQuery.pageNum < maxPage"
                  class="art-more true"
                  @click="getListMore()"
                >
                  {{ $t('more2') }} >
                </div>
                <div v-else class="art-more none">{{ $t('noMore') }}</div>
              </div>
            </infinite-scroll>
          </div>
          <!-- 右侧{{$t('latest')}} 热点文章 -->
          <div class="row-right">
            <!-- {{$t('latest')}} -->
            <hot-article></hot-article>
            <new-book></new-book>
          </div>
        </el-row>
      </div>
    </el-row>
  </div>
</template>

<script>
import HotArticle from '@/components/HotArticle';
import NewBook from '@/components/NewBook';

export default {
  name: 'ImgNumSay',
  components: {
    HotArticle,
    NewBook,
  },
  data() {
    return {
      currentBanner: 0,
      bannerData: [],

      bookData: {},
      // 热点文章
      articleData: [],
      // 当前文章列表展示形式
      currentView: 'img',
      // 文章列表
      artData: [],
      // 文章总数量
      listTotal: 0,
      maxPage: 1,
      // 文章列表请求信息
      listQuery: {
        columnId: '',
        labelId: '',
        pageSize: 10,
        pageNum: 1,
      },
      // 标签
      labelData: [],
      currentLabel: '',
      imgCount: 0,

      screenWidth: 0, // 页面宽度
      bannerHeight: 0,

      busy: true,
      nomore: false,
      gutterWidth: 20,
    };
  },
  beforeCreate() {
    // if (!sessionStorage.getItem("reload")) {
    //   sessionStorage.setItem("reload", "1");
    //   // location.reload();
    // }
  },
  destroyed() {
    // sessionStorage.removeItem("reload");
  },
  mounted() {
    if (this.$route.query.token) {
      sessionStorage.setItem('token', this.$route.query.token);
    }
    // 首次加载时,初始化高度
    this.screenWidth = window.innerWidth;
    this.bannerHeight = (600 / 1920) * this.screenWidth;
    // 窗口大小发生改变
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
      this.bannerHeight = (600 / 1920) * this.screenWidth;
      if (this.$store.state.webType === 'h5') {
        this.bannerHeight += 50;
      }
    };
    this.listQuery.columnId = this.$getPartId(this.$route.path);
    this.listQuery.menuId = this.$getMenuId(this.$route.path);
    this.listTotal = 0;
    this.maxPage = 1;
    this.getList();
    this.getBanner();
    this.getLabels();
  },
  methods: {
    readeImgInfo() {
      this.$goDetail(this.bannerData[this.currentBanner].id);
      // console.log("点击了中间大图");
    },
    async loadMore() {
      // console.log(
      //   "loadMore",
      //   this.busy || this.listQuery.pageNum >= this.maxPage
      // );
      if (this.busy || this.listQuery.pageNum >= this.maxPage) return;
      this.busy = true;
      this.listQuery.pageNum += 1;
      await this.getList();
    },
    viewTypeChange(type) {
      this.artData = [];
      this.listQuery.pageNum = 1;
      this.getList();
      this.currentView = type;
      this.$nextTick(() => {
        this.$redrawVueMasonry();
      });
    },
    getList() {
      // 如果是重新获取 imgCount计0
      // if (this.artData.length == 0) {
      //   this.imgCount = 0;
      // }
      this.$get(this.$api + '/cms/web/selsctWeb', this.listQuery)
        .then(
          (res) => {
            this.artData = [...this.artData, ...res.data];
            this.listTotal = res.total;
            this.maxPage = res.maxPage;

            let that = this;
            this.$nextTick(() => {
              that.nomore = true;
              setTimeout(() => {
                that.busy = false;
              }, 300);
            });
          }
        );
    },
    changeLabel(id, label) {
      this.listQuery.labelId = id;
      this.listQuery.pageNum = 1;
      this.currentLabel = label;
      this.artData = [];
      this.getList();
    },
    getLabels() {
      this.$get(this.$api + '/cms/web/getLabelByPartId', {
        partId: this.listQuery.columnId,
      })
        .then((res) => {
          this.labelData = res.data;
        });
    },
    getListMore() {
      this.listQuery.pageNum += 1;
      this.getList();
    },
    getBanner() {
      this.$get(this.$api + '/cms/web/partArticleBanner', {
        menuId: this.listQuery.menuId,
      })
        .then((res) => {
          res.data.forEach((item) => {
            this.bannerData.push(item);
          });
          //  console.log(this.bannerData);
          if (this.$store.state.lang == 'cn') {
            return;
          }
          $('.slideshow')
            .imagesLoaded({
              background: true,
            })
            .done(function () {
              var slideshow,
                navigation,
                navigationItem,
                detailItem,
                rotation,
                type = '_short';
              // debugger
              // init variables
              setTimeout(() => {
                // hide loader
                $('.loader')
                  .addClass('is-loaded');
                slideshow = $('.slideshow');
                navigation = $('.navigation');
                navigationItem = $('li.navigation-item');
                detailItem = $('.detail-item');
                //  console.log("navigationItem", navigationItem);
                // prepare letters
                $('.headline')
                  .each(function () {
                    $(this)
                      .html(
                        $(this)
                          .text()
                          .replace(
                            /([^\x00-\x80]|\/.)/g,
                            '<span class=\'letter\'>$&</span>'
                          )
                      );
                  });

                // prepare navigation and set navigation items on the right place
                navigationItem.each(function (index, elem) {
                  // console.log('elem', elem)
                  TweenMax.set(elem, {
                    left:
                      navigation.width() / 2 - navigationItem.width() / 2 - 10,
                    rotation: -180 + (index * 360) / navigationItem.length,
                    transformOrigin: '50% ' + navigation.width() / 2 + 'px',
                  });
                  TweenMax.set($(elem)
                    .find('.rotate-holder'), {
                    text: String((index * 360) / navigationItem.length),
                  });
                  TweenMax.set($(elem)
                    .find('.background-holder'), {
                    rotation: -180 - (index * 360) / navigationItem.length,
                  });
                });
                // click/hover on items
                navigationItem.on('mouseenter', setTweenValues);
                navigationItem.on('click', function () {
                  //  console.log("navigationItemClick", 11111111111);
                  doTween($(this));
                });

                // on load show slideshow as well as first "active" navigation/detail item
                TweenMax.to(slideshow, 1, {
                  autoAlpha: 1,
                });
                TweenMax.to($('.active')
                  .find('.letter'), 0.7, {
                  autoAlpha: 1,
                  x: 0,
                });
                TweenMax.to($('.active')
                  .find('.background'), 0.7, {
                  autoAlpha: 1,
                  x: 0,
                });
              }, 500);

              // set tween values
              function setTweenValues() {
                rotation = Number($(this)
                  .find('.rotate-holder')
                  .text());
              }

              // do tween
              function doTween(target) {
                var targetIndex = navigationItem.index(target),
                  timeline = new TimelineMax();

                // add/remove class "active" from navigation & detail
                navigationItem.each(function () {
                  $(this)
                    .removeClass('active');
                  if ($(this)
                    .index() == $(target)
                    .index()) {
                    $(this)
                      .addClass('active');
                  }
                });
                detailItem.each(function () {
                  $(this)
                    .removeClass('active');
                  if ($(this)
                    .index() == $(target)
                    .index()) {
                    $(this)
                      .addClass('active');
                  }
                });

                timeline
                  .to(navigation, 0.6, {
                    rotation: -rotation + type,
                    transformOrigin: '50% 50%',
                    ease: Sine.easeInOut,
                  })
                  .staggerTo(
                    navigationItem.find('.background-holder'),
                    0.6,
                    {
                      cycle: {
                        //function that returns a value
                        rotation: function (index, element) {
                          return (
                            -180 -
                            Number($(element)
                              .prev('.rotate-holder')
                              .text()) +
                            rotation +
                            type
                          );
                        },
                      },
                      transformOrigin: '50% 50%',
                      ease: Sine.easeInOut,
                    },
                    0,
                    '-=0.6'
                  )
                  .staggerFromTo(
                    $('.active')
                      .find('.letter'),
                    0.3,
                    {
                      autoAlpha: 0,
                      x: -100,
                    },
                    {
                      autoAlpha: 1,
                      x: 0,
                      ease: Sine.easeInOut,
                    },
                    0.025,
                    '-=0.3'
                  )
                  .fromTo(
                    $('.active')
                      .find('.background'),
                    0.9,
                    {
                      autoAlpha: 0,
                      x: -100,
                    },
                    {
                      autoAlpha: 1,
                      x: 0,
                      ease: Sine.easeInOut,
                    },
                    0.05,
                    '+=0.3'
                  );
              }
            });
        });
    },
    changeBanner(index) {
      //  console.log(index);
      if (this.currentBanner != index) {
        this.currentBanner = index;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#img-num-say {
  position: relative;
  width: 100%;

  &::after {
    // content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url("../assets/images/zhzm-bg.jpg") no-repeat;
    background-size: 100% auto;
    background-position: center 0;
  }

  .page {
    min-height: 800px;
    padding: fh(152vh, pc) fw(80vw, pc) fh(40vh, pc) fw(80vw, pc);
    background: #fff;

    ::v-deep .el-breadcrumb {
      .el-breadcrumb__inner {
        font-weight: bold;
        color: #fff !important;
        font-size: fh(18vh, pc);
      }
    }

    .banner-view {
      position: relative;
      margin-top: fh(16vh, pc);

      .banner-text {
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        width: 100%;
        cursor: pointer;
        padding: fw(40vw, pc);
        font-size: fw(20vw, pc);
        font-weight: 600;
        color: #FBFEFF;
        background: linear-gradient(180deg, rgba(2, 21, 91, 0.1) 0%, #010823 100%);

        &:hover {
          opacity: .8;
        }

        .text-item {
          width: fw(80vw, pc);
          height: 100%;
          display: flex;
          align-items: center;
          background-color: rgba(46, 46, 46, 0.856);
          cursor: pointer;
          margin-left: 1px;

          &:nth-child(1) {
            margin-left: 0;
          }

          :hover {
            opacity: 0.8;
          }

          &.current {
            background-color: rgba(166, 58, 25, 0.9);
            margin-right: auto;
          }

          span {
            display: block;
            margin: 0 auto;
            writing-mode: vertical-lr; /*从左向右 从右向左是 writing-mode: vertical-rl;*/
            -webkit-writing-mode: vertical-lr; /*从左向右 从右向左是 writing-mode: vertical-rl;*/
            font-size: fh(36vh, pc);
            font-weight: bold;
            color: #fbfeff;
            text-align: center;
            letter-spacing: fh(20vh, pc);
          }
        }
      }

      img {
        width: 100%;
      }
    }

    .art-more {
      width: max-content;
      margin: fh(40vh, pc) auto;
      color: $sh;
      font-size: fh(14vh, pc);

      &.true:hover {
        cursor: pointer;
        opacity: 0.8;
        color: $zh;
      }

      &.none {
        opacity: 0.5;
      }
    }

    .say-title {
      display: flex;
      align-items: center;
      width: 100%;
      padding: fh(40vh, pc) fw(40vw, pc);
      padding-bottom: fh(28vh, pc);

      .say-label {
        color: #d6d6d6;
        position: relative;
        font-size: fh(24vh, pc);
        font-weight: 800;
        // margin-top: fh(20vh, pc);
        margin-right: fh(80vh, pc);
        // padding-left: fw(20vw, pc);
        &::after {
          content: "";
          position: absolute;
          bottom: fh(-12vh, pc);
          right: fw(-12vw, pc);
          width: fw(36vw, pc);
          height: fh(18vh, pc);
          border-right: fw(6vw, pc) solid rgba(214, 214, 214, 0.3);
          border-bottom: fw(8vw, pc) solid rgba(214, 214, 214, 0.3);
        }
      }

      .art-tab {
        width: 100%;
        display: flex;
        align-items: center;
        color: rgba(251, 254, 255, 0.8);

        .tab-item {
          margin-right: fw(60vw, pc);
          font-size: fh(16vh, pc);
          position: relative;
          line-height: fh(30vh, pc);

          &:hover {
            color: #fff;
            cursor: pointer;
          }

          &.active {
            font-size: fh(20vh, pc);
            font-weight: bold;
            color: #fff;

            &::before {
              content: "";
              position: absolute;
              bottom: fh(-14vh, pc);
              width: 100%;
              border-top: fh(6vh, pc) solid $zh;
            }
          }
        }

        .tab-info {
          margin-left: auto;
          display: flex;
          align-items: center;

          .toggle-img {
            margin-left: fh(62vw, pc);
            margin-right: fh(24vw, pc);
          }

          img {
            width: fw(20vw, pc);
            cursor: pointer;
          }
        }
      }
    }
  }

  .page-content {
    background-color: #fff;
    padding: 0 0 fh(40vh, pc) 0;

    @keyframes showDivAni {
      0% {
        opacity: 0;
      }
      30% {
        opacity: 1;
      }
      100% {
        opacity: 1;
      }
    }

    .art-row {
      display: flex;
      padding-top: fh(40vh, pc);
      width: 100%;

      .book-content {
        background-color: $fh90;
        padding-bottom: fh(40vh, pc);

        .book-btn {
          display: flex;
          width: 100%;
          align-items: flex-end;
          justify-content: center;

          img {
            width: fw(180vw, pc);

            &:hover {
              cursor: pointer;
              opacity: 0.7;
            }
          }
        }

        .book-row {
          display: flex;
          width: 100%;
          padding: fh(46vh, pc) fw(20vw, pc);
          color: $sh;

          img.book-img {
            width: fw(280vw, pc);
          }

          .book-text {
            padding-left: fw(10vw, pc);

            .view-label {
              color: $zh;
              position: relative;
              display: inline-block;
              font-size: fh(24vh, pc);
              font-weight: 800;
              margin-top: fh(20vh, pc);
              margin-bottom: fh(60vh, pc);

              &::after {
                content: "";
                position: absolute;
                bottom: fh(-16vh, pc);
                right: fw(-12vw, pc);
                width: fw(30vw, pc);
                height: fh(18vh, pc);
                border-right: fw(6vw, pc) solid hsla(14, 74%, 37%, 0.2);
                border-bottom: fw(8vw, pc) solid hsla(14, 74%, 37%, 0.2);
              }
            }

            .text-item {
              padding-bottom: fh(30vh, pc);

              .item-title {
                color: $sh;
                font-size: fh(18vh, pc);
                font-weight: bold;
                padding-bottom: fh(20vh, pc);
              }

              .item-content {
                font-size: fh(16vh, pc);
                line-height: fh(26vh, pc);
              }
            }
          }
        }
      }

      .row-right {
        display: flex;
        flex: 1;
        margin-left: fw(20vw, pc);
        flex-flow: column;

        .hot-article {
          width: 100%;
          padding: fh(30vh, pc) fw(30vw, pc);
          background-color: $fh90;
          margin-top: fh(30vh, pc);

          .article-label {
            color: $zh;
            position: relative;
            display: inline-block;
            font-size: fh(24vh, pc);
            font-weight: 800;
            margin-top: fh(20vh, pc);
            margin-bottom: fh(60vh, pc);

            &::after {
              content: "";
              position: absolute;
              bottom: fh(-16vh, pc);
              right: fw(-12vw, pc);
              width: fw(30vw, pc);
              height: fh(18vh, pc);
              border-right: fw(6vw, pc) solid hsla(14, 74%, 37%, 0.2);
              border-bottom: fw(8vw, pc) solid hsla(14, 74%, 37%, 0.2);
            }
          }

          .article-view {
            color: $sh;

            .article-item {
              width: fw(485vw, pc);
              line-height: fh(26vh, pc);
              margin-bottom: fh(26vh, pc);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;

              span {
                color: $zh;
                font-size: fh(18vh, pc);
                font-weight: bold;
                display: inline-block;
                padding-right: fw(16vw, pc);
              }

              &:hover {
                opacity: 0.8;
                cursor: pointer;
                color: $zh;
              }
            }
          }
        }
      }
    }

    .art-col {
      position: relative;
      width: fw(1180vw, pc);
      margin-top: fh(20vh, pc);

      .art-tab {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: fh(30vh, pc);
        color: rgba(0, 0, 0, 0.8);

        .tab-item {
          margin-right: fw(60vw, pc);
          font-size: fh(16vh, pc);
          position: relative;
          line-height: fh(24vh, pc);

          &:hover {
            color: #000;
            cursor: pointer;
          }

          &.active {
            font-size: fh(20vh, pc);
            font-weight: bold;
            color: #000;

            &::before {
              content: "";
              position: absolute;
              bottom: fh(-14vh, pc);
              width: 100%;
              border-top: fh(6vh, pc) solid $zh;
            }
          }
        }

        .tab-info {
          margin-left: auto;
          display: flex;
          align-items: center;

          .toggle-img {
            margin-left: fh(62vw, pc);
            margin-right: fh(24vw, pc);
          }

          img {
            width: fw(20vw, pc);
            cursor: pointer;
          }
        }
      }

      .art-view {
        cursor: pointer;

        &.text {
          .art-item {
            width: 100%;
          }

          .item-title {
            color: $sh;
            display: flex;
            width: 100%;

            .item-info {
              padding-left: fw(40vw, pc);
              margin-left: auto;
              width: max-content !important;

              .info-label {
                margin-right: fw(20vw, pc);
                width: max-content !important;
              }

              .info-time {
                width: max-content;
                margin-left: fw(20vw, pc) !important;
              }
            }
          }
        }

        .art-item {
          // break-inside: avoid;
          width: calc((100% - 40px) / 3);
          margin-bottom: fh(20vh, pc);
          background-color: $dh;

          &:hover {
            opacity: 0.9;
          }

          img {
            width: 100%;
          }

          .art-content {
            width: 100%;
            color: $sh;
            padding: fh(20vh, pc) fw(20vw, pc);
            position: relative;
            z-index: 2;
            background-color: $dh;

            .item-title {
              color: $sh;
              font-size: fh(16vh, pc);
              line-height: fh(20vh, pc);
              margin-bottom: fh(8vh, pc);
              font-weight: 600;
            }

            .item-info {
              display: flex;
              align-items: center;
              width: 100%;
              justify-content: space-between;
              font-size: fh(14vh, pc);
              line-height: fh(20vh, pc);

              .info-time {
                color: #a1b8bd;
                margin-left: auto;
              }
            }

            .item-content {
              font-size: fh(14vh, pc);
              line-height: fh(20vh, pc);
              font-weight: 400;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }

      .art-more {
        column-count: 1;
        column-gap: 0;
        width: max-content;
        margin: fh(40vh, pc) auto;
        color: rgba(0, 0, 0, 1);
        font-size: fh(14vh, pc);

        &.true:hover {
          cursor: pointer;
          opacity: 0.8;
          color: $zh;
        }

        &.none {
          opacity: 0.5;
        }
      }
    }
  }
}

.en #img-num-say.h5 .page {
  .banner-view {
    .banner-text {
      .text-item {
        width: 36px;
        text-align: center;

        span {
          letter-spacing: 0px;
          writing-mode: tb !important;
          -webkit-writing-mode: tb !important;
          text-align: center;
          font-size: 10px;
        }
      }
    }
  }
}

#img-num-say.h5 .page .banner-view .banner-text .text-item {
  width: 36px;
  text-align: center;

  span {
    font-size: 10px;
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    letter-spacing: 6px !important;
  }
}

#img-num-say.h5 {
  .page-content {
    .art-col {
      .view-label {
        font-size: fh(18vh, h5);
        margin-right: fh(40vw, h5);

        img {
          width: fw(22vw, h5);
          bottom: fh(-6vh, h5);
          right: fw(-6vw, h5);
        }
      }

      .art-tab {
        // flex-wrap: wrap;
        .tab-view {
          // margin-top: 20px;
        }
      }
    }

    .art-view {
      padding-bottom: 20px;
      min-height: 240px;

      .art-item {
        width: calc(50% - 10px);

        .item-mins {
          font-size: fh(10vh, h5);
          bottom: fh(3vh, h5) !important;
        }
      }
    }
  }

  .say-view {
    .el-col-6 {
      width: 50%;
      padding: 0 4px !important;
    }
  }

  .img-say {
    .say-view {
      .row-right {
        display: none;
      }
    }
  }

  .say-title {
    .tab-info {
      font-size: fh(12vh, h5);

      img {
        width: fw(20vw, h5) !important;
      }
    }

    .art-tab .tab-item {
      font-size: fh(14vh, h5);
      line-height: fh(16vh, h5);

      &.active {
        font-size: fh(16vh, h5);
      }
    }
  }
}

.h5#img-num-say .img-say .say-view .say-item .say-content {
  .item-title {
    color: $sh;
    font-size: 14px;
    line-height: 20px;
  }

  .item-info {
    font-size: 12px;
    line-height: 12px;

    .info-time {
      margin: 4px 0;
      margin-left: auto;
    }

    .info-label {
      font-size: 12px;
    }
  }
}
</style>
